<!-- 医院端配送准入查看产品-->
<template>
  <div class="distribution-admittance-seeProduct-box">
    <el-container class="admittance-seeProduct-box">
      <el-header
        height="auto"
        style="padding:0;">
        <h3>注册证信息</h3>
      </el-header>
      <!-- 注册证基本信息 -->
      <div class="register-info-box">
        <div class="info-left-box">
          <div
            v-for="(item,index) in registerInfo"
            :key="index"
            class="info-every">
            <div>{{ item.label }}:</div>
            <div v-if="item.type === 'type'">{{ item.options[dataInfo[item.value]] || '--' }}</div>
            <div
              v-else-if="item.type === 'array'"
            >{{ certificateVoListfun(dataInfo[item.value],item.value) }}</div>
            <div v-else>{{ dataInfo[item.value] || '--' }}</div>
          </div>
        </div>
        <div class="info-right-box">
          <!--// 图片的预览-->
          <div
            v-if="dataInfo.pictureUrl"
            class="file-box"
            v-viewer>
            <div>
              <el-image
                :src="dataInfo.pictureUrl"
                fit="cover" />
            </div>
            <div class="file-button">
              <span>
                <el-button
                  type="text"
                  @click="previewFile(dataInfo.pictureUrl,dataInfo.annexName)"
                >预览</el-button>
              </span>
              <span>
                <el-button
                  type="text"
                  @click="downloadFile(dataInfo.pictureUrl,dataInfo.annexName)"
                >下载</el-button>
              </span>
            </div>
          </div>
          <!--//PDF预览-->
          <div
            class="file-box"
            v-if="dataInfo.licenseUrl">
            <div>
              <i class="iconfont iconpdf" />
            </div>
            <div class="file-button">
              <span>
                <el-button
                  type="text"
                  @click="previewFile(dataInfo.licenseUrl,dataInfo.annexName,'pdf')"
                >预览</el-button>
              </span>
              <span>
                <el-button
                  type="text"
                  @click="downloadFile(dataInfo.licenseUrl,dataInfo.annexName)"
                >下载</el-button>
              </span>
            </div>
          </div>
        </div>
      </div>
      <div>
        <h3 style="margin:10px 0;">关联产品</h3>
        <!-- 关联产品 -->
        <el-editable
          v-loading="tableLoading"
          :data="dataList"
          height="400"
          :columns="productArr">
          <!-- 院内编码 -->
          <template
            slot="default-hosProdCode"
            slot-scope="scope">
            <div
              style="display:flex;"
              v-if="changeHosProdCode">
              <el-select
                filterable
                remote
                placeholder="请输入院内编码"
                :disabled="!scope.row.isEditcode"
                :remote-method="remoteRequestAsync"
                :loading="hosProdCodeLoading"
                @focus="getRowHosProdId(scope.row)"
                @change="gethosProdId"
                v-model="scope.row.hosProdCode"
              >
                <el-option
                  v-for="item in hosProdCodeList"
                  :key="item.companyProdCode"
                  :label="item.companyProdCode"
                  :value="item.companyProdCode"
                />
              </el-select>
              <el-button
                v-if="!scope.row.isEditcode"
                size="small"
                @click.stop="editHosProdCode(scope.row)"
                type="text text-primary"
              >编辑</el-button>
              <el-button
                v-else
                size="small"
                @click.stop="updateHosProdCodeById(scope.row)"
                type="text text-primary"
              >确定</el-button>
            </div>
            <div v-else>{{ scope.row.hosProdCode ? scope.row.hosProdCode : '--' }}</div>
          </template>
          <!-- 查看资质 -->
          <template
            slot="default-qualificationView"
            slot-scope="scope">
            <el-button
              size="small"
              @click.stop="lookQualifications(scope.row)"
              type="text text-primary"
            >查看</el-button>
          </template>
          <!-- 查看历史记录 -->
          <template
            slot="default-history"
            slot-scope="scope">
            <el-button
              size="small"
              @click.stop="lookHistory(scope.row)"
              type="text text-primary">查看</el-button>
          </template>
        </el-editable>
        <el-pagination
          align="right"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="curPage"
          :page-sizes="PAGE_NUMBER"
          :page-size="pageSize"
          :layout="PAGINATION_LAYOUT"
          :total="totalElements"
        />
      </div>
      <!-- 查看历史记录 -->
      <el-dialog
        title="历史记录"
        :visible.sync="isShowHistory">
        <el-editable
          v-loading="historyLoading"
          :data="historyDataList"
          height="400"
          :columns="historyTableData"
        />
        <span
          slot="footer"
          class="dialog-footer">
          <el-button
            type="primary"
            @click="isShowHistory = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import { registerInfo, productColumns, historyTableData } from './const'
import { cloneDeep, isObject, hasIn } from 'lodash'
import { fileDownload, urlDownload } from '@const/utils.js'
import {
  getCertificate,
  pcHosDistributorProdApplyGetApplyProdByConstrict,
  updateHosProdCodeById,
  authSupplierHospitalSelectcAcAuditRecord,
  hospitalistHosProducts,
  relateProdDistributorAndHospital,
  authSupplierHospitalupdateHosProdCode
} from '@const/beforeSettleApi'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import ElEditable from '@components/el-editable'

export default {
  components: { ElEditable },
  data () {
    return {
      timeout: null, // 延时
      hosProdCodeLoading: false,
      hosProdCodeList: [], // 院内编码下拉
      hosProdId: '', // 院内编码选择后取得产品id
      rowHospitalId: '', // 原数据的医院id

      id: '',
      hospitalId: '', // 医院id 永康
      changeHosProdCode: 0, // 是否可以修改以院内编码
      registerInfo,
      dataInfo: {},
      tableLoading: false,
      dataList: [],
      productArr: [],
      productColumns,

      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0, // 总共的条数
      tabIndex: 1,

      isShowHistory: false, // 是否显示审核历史
      historyLoading: false,
      historyDataList: [], // 历史记录数据
      historyTableData
    }
  },
  created () {
    this.id = this.$route.query.id
    this.hospitalId = this.$route.query.hospitalId
    this.changeHosProdCode = +this.$route.query.changeHosProdCode
    this.arrangement()
    this.getCertificate()
    this.getList()
  },
  computed: {
    // 列表需要的入参
    constrictId () {
      return this.$route.query.constrictId
    },
    registNo () {
      return this.$route.query.registNo
    },
    distributorId () {
      return this.$route.query.distributorId
    }
  },
  methods: {
    // 获取院内编码 当前数据的 hospitalId
    getRowHosProdId (item) {
      this.rowHospitalId = item.hosId
      this.hosProdCodeList = []
      this.hosProdId = ''
    },
    // 院内编码模糊搜索后选择 把对应下拉中的产品id取出来
    gethosProdId (e) {
      let obj = this.hosProdCodeList.find(item => item.companyProdCode === e)
      this.hosProdId = obj.id ? obj.id : ''
    },
    // 编辑院内码
    editHosProdCode (row) {
      this.$set(row, 'isEditcode', true)
    },
    // 更新院内编码维护关系
    updateHosProdCodeById (row) {
      if (!this.hosProdId) {
        this.$set(row, 'isEditcode', false)
        return
      }
      this.$axios({
        method: 'post',
        url: relateProdDistributorAndHospital,
        data: {
          hosProdId: this.hosProdId,
          hospitalId: row.hospitalId,
          hospitalName: row.hospitalName,
          platProdCode: row.platCode,
          companyProdId: '',
          companyId: this.distributorId, // ???
          authItemId: row.distributorProdItemId
        }
      })
        .then(res => {
          if (res.data.code === '0') {
            this.$set(row, 'isEditcode', false)
            this.$message({
              type: 'success',
              message: '编辑成功'
            })
          }
        })
        .finally(() => {
          this.tableLoading = false
        })
      this.$axios({
        method: 'post',
        url: authSupplierHospitalupdateHosProdCode,
        data: {
          id: row.id,
          hosProdItemId: this.hosProdId,
          hosProdCode: row.hosProdCode,
          constrictId: row.constrictId || '',
          role: this.$store.state.companyName,
          user: this.$store.state.realName
        }
      }).then(res => {
        console.log(res, '军杰对照接口')
      })
    },
    // 院内编码远程搜索
    remoteRequestAsync (queryString) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.remoteRequestSearch(queryString)
      }, 1000 * Math.random())
    },
    // 院内编码远程请求接口
    remoteRequestSearch (queryString) {
      this.hosProdCodeLoading = true
      if (!queryString) return
      this.$axios({
        url: hospitalistHosProducts,
        method: 'post',
        data: {
          hospitalId: this.hospitalId,
          hosProdCode: queryString
        }
      })
        .then(res => {
          this.hosProdCodeList = res.data.payload ? res.data.payload : []
        })
        .finally(() => {
          this.hosProdCodeLoading = false
        })
    },
    // 获取关联产品列表
    getList () {
      this.tableLoading = true
      this.$axios({
        method: 'post',
        url: pcHosDistributorProdApplyGetApplyProdByConstrict,
        data: {
          pageSize: this.pageSize,
          page: this.curPage,
          constrictId: this.constrictId,
          registNo: this.registNo
        }
      })
        .then(res => {
          if (hasIn(res, ['data', 'payload'])) {
            this.dataList = res.data.payload.content
              ? res.data.payload.content
              : []
            this.totalElements = res.data.payload.totalElements
          }
        })
        .finally(() => {
          this.tableLoading = false
        })
    },
    // 获取注册信息
    getCertificate () {
      // 请求列表数据
      this.$axios
        .$get(getCertificate, {
          params: {
            id: this.id
          }
        })
        .then(res => {
          if (res.code !== '0') return
          this.dataInfo = res.payload
        })
        .finally(res => {
          this.Loading = false
        })
    },
    // 关联注册证返回字符串展示
    certificateVoListfun (data, key) {
      if (!data) {
        return
      }
      // // 关联注册证
      if (key === 'associationCertificates') {
        if (data.length > 0) {
          let arr = data.map(item => item.associationRegistNo)
          return arr.join(',')
        }
      }
    },
    // 预览图片
    previewFile (url, name, type = 'pic') {
      if (type === 'pdf') {
        this.$pdfViewer({ url, title: name })
      } else {
        const viewer = this.$el.querySelector('.file-box').$viewer
        viewer.show()
      }
    },
    // 下载图片、PDF
    downloadFile (url, name) {
      if (!url) return
      urlDownload(url, name)
    },
    //   整理一下产品列表的表头
    arrangement () {
      let arr = cloneDeep(this.productColumns)
      arr.splice(7, 1)
      arr.splice(9, 1)
      this.productArr = arr
    },
    // 查看资质
    lookQualifications (row) {
      this.$router.push({
        path:
          '/hospitalSide/channelManagement/distributionAdmittance/productQualification',
        query: {
          distributorProdItemId: row.distributorProdItemId,
          id: row.distributorProdItemId,
          hospitalId: row.hospitalId,
          hosProdCode: row.hosProdCode
        }
      })
    },
    // 查看历史记录
    lookHistory (row) {
      this.isShowHistory = true
      this.$axios({
        method: 'get',
        url: authSupplierHospitalSelectcAcAuditRecord,
        params: {
          authId: row.id,
          authType: 1
        }
      })
        .then(res => {
          if (hasIn(res, ['data', 'payload'])) {
            this.historyDataList = res.data.payload
          }
        })
        .catch(() => {
          this.isShowHistory = false
        })
    },
    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.curPage = 1
      this.getList()
    },
    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.getList()
    }
  }
}
</script>
<style lang="less">
.distribution-admittance-seeProduct-box {
  height: 100%;
  overflow: scroll;
  .admittance-seeProduct-box {
    .register-info-box {
      display: flex;
      .info-left-box {
        width: 80%;
        margin-top: 10px;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        display: flex;
        flex-wrap: wrap;
        .info-every {
          width: 50%;
          min-height: 40px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ccc;
          border-right: 1px solid #ccc;
          div:first-child {
            width: 30%;
            height: 100%;
            background: #dfe2e8;
            display: flex;
            align-items: center;
            padding-left: 10px;
            border-right: 1px solid #ccc;
          }
          div:last-child {
            width: 70%;
            padding: 10px;
          }
        }
      }
      .info-right-box {
        width: 20%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .file-box {
          width: 250px;
          height: 250px;
          border: 1px solid #ccc;
          &:first-child {
            margin-bottom: 20px;
          }
          div:first-child {
            width: 100%;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            .iconfont {
              font-size: 60px;
            }
            img {
              width: 100%;
              height: 100%;
            }
          }
          .file-button {
            width: 100%;
            display: flex;
            align-items: center;
            height: 50px;
            border-top: 1px solid #ccc;
            span {
              text-align: center;
              display: block;
              width: 50%;
              height: 80%;
            }
            span:first-child {
              border-right: 1px solid #ccc;
            }
          }
        }
      }
    }
  }
}
</style>
